function yyrgetX(obj) {
    var parObj = obj;
    var left = obj.offsetLeft;
    while (parObj = parObj.offsetParent) {
        left += parObj.offsetLeft;
    }
    return left;
}
function yyrgetY(obj) {
    var parObj = obj;
    var top = obj.offsetTop;
    while (parObj = parObj.offsetParent) {
        top += parObj.offsetTop;
    }
    return top
}
// 1 控制代码运行
// 2 观察关机值(watch 鼠标选中 鼠标悬浮)

function yyrdirection(event, obj) {
    // 鼠标的页面坐标
    var pageX = event.pageX;
    var pageY = event.pageY;

    // 盒子中心位置在页面的坐标
    // 在页面中的水平坐标 = 盒子到页面左侧的距离 + 盒子宽度的一半
    // 在页面中的垂直坐标 = 盒子到页面上侧的距离 + 盒子高度的一半
    var centerX = yyrgetX(obj) + obj.offsetWidth / 2;
    var centerY = yyrgetY(obj) + obj.offsetHeight / 2;
    console.log(yyrgetX(obj),yyrgetY(obj));
    var centerX = $(obj).offset().left + obj.offsetWidth / 2;
    var centerY = $(obj).offset().top + obj.offsetHeight / 2;
    console.log($(obj).offset().left,$(obj).offset().top);


    // 鼠标相对于盒子中心位置的坐标
    var objx = pageX - centerX;
    var objy = pageY - centerY;

    // kFix:对角线斜率  kMouse:鼠标相对于盒子中心斜率
    var kFix = obj.offsetHeight / obj.offsetWidth;
    var kMouse = objy / objx;
    if (kFix >= Math.abs(kMouse)) {
        return objx >= 0 ? 1 : 3;
    } else {
        return objy >= 0 ? 2 : 0;
    }
}
(function(){
    document.querySelector('audio').pause();
    document.querySelector('.video-nav').addEventListener('mouseover',function(e){
        var index =  e.target.getAttribute('data-index');
        if (index){
            var videos = document.querySelector('.video-list').querySelectorAll('.body-video');
            var videoNavs = document.querySelector('.video-nav').querySelectorAll('li');
            for ( var i =0;i<videos.length;i++){
                videos[i].classList.remove('active')
            }
            videos[index].classList.add('active');
            for ( var i =0;i<videoNavs.length;i++){
                videoNavs[i].classList.remove('active')
            }
            videoNavs[index].classList.add('active');
        }
    })

    document.querySelector('.media-music .music-btn').addEventListener('click',function(){
        var status = this.getAttribute('data-status');
        if ( status == "pause"){
            document.querySelector('audio').play();
            this.setAttribute('data-status',"play");
            this.classList.add('active')
            document.querySelector('#yyr').querySelector('.music-cover').style.animationPlayState = "running";
            document.querySelector('#yyr').querySelector('.bar').classList.add('active');
            // var btnPause = '../images/yyr-btn_pause_c6f5f5c5.webp';
            // this.style.backgroundImage = 'url('+btnPause+')';
        }else{
            document.querySelector('#yyr').querySelector('.music-cover').style.animationPlayState = "paused";
            document.querySelector('#yyr').querySelector('.bar').classList.remove('active');
            document.querySelector('audio').pause();
            this.setAttribute('data-status',"pause");
            this.classList.remove('active')
            // var btnStart = '../images/yyr-btn_start_aa29fe57.webp';
            // this.style.backgroundImage = 'url('+btnStart+')';
        }
    })
    
    //进去
    $("#picList li").on("mouseenter", function (e) {
        var w = $(this).width();
        var h = $(this).height();
        var direction = yyrdirection(e, this.querySelector(".img"));
        /** do your animations here **/
        switch (direction) {
            case 0:
                 $(this).find('.picHover').css({
                    'top': '-'+h+'px',
                    'left': '0',
                    'opacity': '0',
                }).stop().animate({
                    'top': '0',
                    'left': '0',
                    'opacity': '1',
                }, 300)
                /** animations from the TOP **/
                break;
            case 1:
                 $(this).find('.picHover').css({
                    'top': '0',
                    'left': w+'px',
                    'opacity': '0',
                }).stop().animate({
                    'top': '0',
                    'left': '0',
                    'opacity': '1',
                }, 300)
                /** animations from the RIGHT **/
                break;
            case 2:
                 $(this).find('.picHover').css({
                    'top': h+'px',
                    'left': '0',
                    'opacity': '0',
                }).stop().animate({
                    'left': '0',
                    'top': '0',
                    'opacity': '1',
                }, 300)
                /** animations from the BOTTOM **/
                break;
            case 3:
                 $(this).find('.picHover').css({
                    'top': '0',
                    'left': '-'+w+'px',
                    'opacity': '0',
                }).stop().animate({
                    'left': '0',
                    'right': '0',
                    'opacity': '1',
                }, 300)
                /** animations from the LEFT **/
                break;
        }
    });

    //出来    
    $("#picList li").on("mouseleave", function (e) {
        var w = $(this).width();
        var h = $(this).height();
        var direction = yyrdirection(e, this.querySelector(".img"));
        /** do your animations here **/
        switch (direction) {
            case 0:
                 $(this).find('.picHover').css({
                    'right': '0',
                }).stop().animate({
                    'right': '0',
                    'top': '-'+h+'px',
                }, 300)
                /** animations from the TOP **/
                break;
            case 1:
                 $(this).find('.picHover').css({
                    'top': '0',
                }).stop().animate({
                    'top': '0',
                    'left': w+'px',
                }, 300)
                /** animations from the RIGHT **/
                break;
            case 2:
                 $(this).find('.picHover').css({
                    'top': '0',
                    'left': '0',
                }).stop().animate({
                    'left': '0',
                    'top': h+'px',
                }, 300)
                /** animations from the BOTTOM **/
                break;
            case 3:
                 $(this).find('.picHover').css({
                    'top': '0',
                    'left': '0',
                }).stop().animate({
                    'left': '-'+w+'px',
                    'right': '0',
                }, 300)
                /** animations from the LEFT **/
                break;
        }
    });

    var preViewPic = new Viewer(document.getElementById('picList'),{
        url:"data-src",
        navbar:false,
        toolbar:false,
    })

    var picHovers = document.querySelectorAll('#picList li');
    for ( let i = 0 ; i< picHovers.length; i++ ){
        picHovers[i].addEventListener('click',function(){
            preViewPic.view(i)
        })
    }

    var videosBtns = document.querySelectorAll('.body-video .btn-play')
    for ( let i =0; i<videosBtns.length;i++){
        videosBtns[i].addEventListener('click',function(e){
            var url = e.target.getAttribute('data-mp4')
            if ( url && e.target.nodeName == "I"){
                new M({
                    title: '',
                    template: `<div class="swiper mySwiper" id="gallery">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <video class="video-slide" controls="" style="width: 100%; height: 100%;">
                                <source src="https://qn.v.netease.com/2021/1019/39e324e82d9353de6057c8c059c9da67qt.mp4">
                            </video>
                        </div>
                        <div class="swiper-slide">
                            <video class="video-slide" controls="" style="width: 100%; height: 100%;">
                                <source src="https://qn.v.netease.com/2020/0916/fb02a4feb07a92ddd6980ed4dd86e091qt.mp4">
                            </video>
                        </div>
                        <div class="swiper-slide">
                            <video class="video-slide" controls="" style="width: 100%; height: 100%;">
                                <source src="https://qn.v.netease.com/r/video/20200907/a9511d11-22a6-4e60-bc13-8a7adfa39ac3.mp4">
                            </video>
                        </div>
                        <div class="swiper-slide">
                            <video class="video-slide" controls="" style="width: 100%; height: 100%;">
                                <source src="https://qn.v.netease.com/r/video/20200916/cb90e8a6-f630-4b7a-a63c-81c9fc9c1dc0.mp4">
                            </video>
                        </div>
                    </div>
                </div>
                <div class="swiper mySwiper" id="thumbs">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide video-slide"><img data-index="0" src="./images/yyr-video1.png" alt="三界技术力" title="三界技术力"></div>
                        <div class="swiper-slide video-slide"><img data-index="1" src="./images/yyr-video2.jpg" alt="小蝴蝶剧情" title="小蝴蝶剧情"></div>
                        <div class="swiper-slide video-slide"><img data-index="2" src="./images/yyr-video3.jpg" alt="绝美姥姥" title="绝美姥姥"></div>
                        <div class="swiper-slide video-slide"><img data-index="3"src="./images/yyr-video4.jpg" alt="新职业司星" title="新职业司星"></div>
                    </div>
                </div>`,
                });

                var thumbsSwiper = new Swiper('#thumbs', {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    watchSlidesVisibility: true,//防止不可点击
                    on:{
                        click:function(swiper,event){
                            $('#gallery .video-slide').each(function(i,ele){
                                if (i == event.target.getAttribute('data-index')){
                                    ele.play()
                                }else{
                                    ele.pause();
                                }
                            })
                        }
                    }
                })
                var gallerySwiper = new Swiper('#gallery', {
                    spaceBetween: 10,
                    thumbs: {
                        swiper: thumbsSwiper,
                    }
                })
                gallerySwiper.slideTo(i)
                $('#gallery .video-slide').eq(i)[0].play();
            }
        })
    }

    // 处理插件点击关闭按钮 无法动态删除DOM事件.
    $('body').on('click','.drag_close',function(e){
        document.querySelector('.drag_content').remove();
    })
}
)();